// 剪裁插件的使用步骤：
// 1. 初始化 --> 得到一个剪裁框
let image = $('#image');
let option = {
  // 约束剪裁比例为 1:1
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
};
image.cropper(option);

// 2. 调用方法
// 剪裁插件的方法语法： image.cropper('方法名', .......方法的参数);


// 3. --------------------- 点击上传按钮，触发文件域的单击事件 ------------------------
$('button:contains("上传")').on('click', function () {
  // 触发文件域的单击事件
  // $('#file').trigger('事件名');
  $('#file').trigger('click');
});


// 4. ----------------  文件域内容改变，更换剪裁区的图片 ------------------------------
$('#file').on('change', function () {
  if (this.files.length > 0) {
    // 获取文件对象
    let fileObj = this.files[0];
    // 创建url
    let url = URL.createObjectURL(fileObj);
    // 更换剪裁区的图片
    image.cropper('replace', url);
  }
})

// 5. ---------------- 点击确定，剪裁图片，转换格式，ajax提交 -------------------------
$('button:contains("确定")').on('click', function () {
  // 调用插件的语法，剪裁
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  // 转成 base64 格式
  // let str = canvas.toDataURL();
  let str = canvas.toDataURL('image/jpeg', 0.5);
  // console.log(str);
  // 提交 这个 base64 格式的字符串给接口
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: str },
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        // 调用父页面的函数
        window.parent.getUserInfo();
      }
    }
  });
})